<template>
  <p-steps class="steps-container" progress-dot :size="small">
    <p-step
      v-for="(item, i) in data"
      :key="i"
      :title="item.nodeName"
      :status="stateOptions[item.state]"
    >
      <template slot="description">
        <p-tooltip :title="item.handleUserName" placement="bottom">
          <span>{{ item.handleUserName }}</span>
        </p-tooltip>
      </template>
    </p-step>
  </p-steps>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    this.stateOptions = {
      1: 'finish',
      2: 'process',
      3: 'wait',
      4: 'lose',
      5: 'uninvolved',
    };
    return {};
  },
};
</script>
<style lang="less" scoped>
.steps-container {
  min-height: 106px;
  padding: 10px 0;
  margin: 20px 0;
  overflow-y: scroll;
}
/deep/
  .poros-steps-item-process
  .poros-steps-item-icon
  > .poros-steps-icon
  .poros-steps-icon-dot {
  background-color: #1890ff;
}
/deep/
  .poros-steps-item-process
  > .poros-steps-item-container
  > .poros-steps-item-tail::after {
  background-color: #1890ff;
}
/deep/
  .poros-steps-item-finish
  > .poros-steps-item-container
  > .poros-steps-item-tail::after {
  background-color: #09a120;
}
/deep/
  .poros-steps-item-finish
  .poros-steps-item-icon
  > .poros-steps-icon
  .poros-steps-icon-dot {
  background: #09a120;
}

/deep/
  .poros-steps-item-wait
  > .poros-steps-item-container
  > .poros-steps-item-tail::after {
  background-color: #cdced5;
}
/deep/
  .poros-steps-item-wait
  .poros-steps-item-icon
  > .poros-steps-icon
  .poros-steps-icon-dot {
  background: #cdced5;
}

/deep/
  .poros-steps-item-uninvolved
  > .poros-steps-item-container
  > .poros-steps-item-tail::after {
  background-color: #cdced5;
  border: 4px dashed #fff;
}
/deep/
  .poros-steps-item-uninvolved
  .poros-steps-item-icon
  > .poros-steps-icon
  .poros-steps-icon-dot {
  background: #cdced5;
  border: 1px dashed #000;
}

/deep/
  .poros-steps-item-lose
  > .poros-steps-item-container
  > .poros-steps-item-tail::after {
  background-color: #cdced5;
}
/deep/
  .poros-steps-item-lose
  .poros-steps-item-icon
  > .poros-steps-icon
  .poros-steps-icon-dot {
  background: #d9001b;
}

/deep/ .poros-steps-item-content {
  height: 40px;
}
/deep/ .poros-steps-item-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
